<template>
	<view :style="{ height: pageHeight, overflow: 'hidden' }">
		<search @search="disableScroll" />
		<!-- 焦点图 -->
		<swiper class="banner" indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
			<swiper-item v-for="item in swiperList" :key="item.goods_id">
				<navigator url="`/subpkg/pages/goods/index?id=${item.goods_id}`">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 导航条 -->
		<view class="navs">
			<navigator
				:open-type="item.open_type ? 'switchTab' : 'navigate'"
				v-for="item in categoryList"
				:key="item.name"
				:url="item.open_type ? '/pages/category/index' : `/subpkg/pages/list/index?query=${item.name}`"
			>
				<image :src="item.image_src"></image>
			</navigator>
		</view>
		<!-- 楼层 -->
		<view class="floors">
			<view class="floor" v-for="item in floorList" :key="item.floor_title.name">
				<view class="title"><image :src="item.floor_title.image_src"></image></view>
				<view class="items">
					<navigator
						v-for="product in item.product_list"
						:key="product.name"
						:url="`/subpkg/pages/list/index?query=${product.name}`"
					>
						<image :src="product.image_src"></image>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 回到顶部 -->
		<view class="goTop icon-top" @click="goTop"></view>
	</view>
</template>

<script>
import search from '@/components/search';

export default {
	data() {
		return {
			pageHeight: 'auto',
			swiperList: [],
			categoryList: [],
			floorList: []
		};
	},

	components: {
		search
	},

	onLoad() {
		this.getSiperList();
		this.getCategoryList();
		this.getFloorList();
	},
	async onPullDownRefresh() {
		await this.getSiperList(); // 1s
		await this.getCategoryList(); // 0.4s
		await this.getFloorList(); // 0.6s

		//这里可以用小promise。all方法，上面三个方法都是一个promise对象,缺点就是全成功才行
		//要是失败了就是检查一下接口
		//那什么时候用呢？高并发，就是同时发送多个请求时候
		// Promise.all([this.getSiperList(), this.getCategoryList(), this.getFloorList()]).then(() => {
		// 	uni.stopPullDownRefresh();
		// });

		// 停止下拉刷新的交互
		uni.stopPullDownRefresh();
	},
	methods: {
		disableScroll(ev) {
			this.pageHeight = ev.pageHeight;
		},
		goTop() {
			// 调用 api 返回页面顶部
			uni.pageScrollTo({
				scrollTop: 0
			});
		},

		async getSiperList() {
			// uni-app 中将 wx.request 进行了 Promise 封装
			// uni-app 中 Promise 返回的结果为【数组】 第1个单是错误信息，第2单元才是结果

			// const swiperList = await uni.request({
			//   url: 'https://api-ugo-web.itheima.net/api/public/v1/home/swiperdata'
			// });

			// 调用接口获取轮播图数据
			const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata');
			// const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata');
			// 验证数据的合法性
			if (res.meta.status !== 200) return uni.$showToast();
			// 更新数据，重新渲染
			this.swiperList = res.message;
		},
		// 获取分类导航数据
		async getCategoryList() {
			// 调用接品获取分类导航数据
			const { data: res } = await uni.$http.get('/api/public/v1/home/catitems');

			// 校验数据是否有效
			if (res.meta.status !== 200) {
				return uni.showToast({
					title: '数据加载失败!',
					icon: 'none'
				});
			}

			// 更新数据，重新渲染..
			this.categoryList = res.message;
		},

		async getFloorList() {
			// 同步方式获取数据

			const { data: res } = await uni.$http.get('/api/public/v1/home/floordata');
			// 数据校验
			if (res.meta.status !== 200) return uni.$showToast();
			// 更新数据，重新渲染
			this.floorList = res.message;
		}
	}
};
</script>

<style scoped lang="scss">
.banner {
	width: 100%;
	height: 340rpx;

	image {
		width: 100%;
		height: 340rpx;
	}
}

.navs {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 44rpx;

	image {
		width: 128rpx;
		height: 140rpx;
	}
}

.floor {
	.title {
		width: 750rpx;
		height: 60rpx;
		padding: 20rpx 0 0 8rpx;
		background-color: #f4f4f4;
	}

	.items {
		padding: 20rpx 16rpx;
		overflow: hidden;

		navigator {
			width: 193rpx;
			height: 188rpx;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
			float: left;
		}

		navigator:first-child {
			width: 232rpx;
			height: 386rpx;
			margin-left: 0rpx;
		}

		navigator:nth-child(2),
		navigator:nth-child(5) {
			width: 273rpx;
		}
	}

	&:first-child {
		.items {
			navigator {
				width: 233rpx;
			}
		}
	}
}

.goTop {
	position: fixed;
	bottom: 30rpx;
	/* #ifdef H5 */
	bottom: 65px;
	/* #endif */
	right: 30rpx;

	display: flex;
	justify-content: center;
	align-items: center;
	width: 100rpx;
	height: 100rpx;
	font-size: 48rpx;
	color: #666;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
}
</style>
